<template>
  <div class="title-bar">
    <div class="info">
      <div class="txt1">{{ datetime }}</div>
      <dv-decoration3 style="width: 160px; height: 30px"></dv-decoration3>
    </div>
    <div
      class="title animated animate__bounceInDown"
      :style="[
        {
          fontSize: `${fontSize}px`,
        },
      ]"
      v-html="'轮椅预约数据大屏'"
    ></div>
    <div class="time">
      <dv-decoration3 style="width: 160px; height: 30px"></dv-decoration3>
      <div class="txt1">{{ datetime }}</div>
      <div class="fbtn">
        <FScreenButton></FScreenButton>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
import { onBeforeMount, ref } from "vue";
import FScreenButton from '../FScreenButton/index.vue'

const props = defineProps({
  title: {
    type: String,
    default: "共享轮椅数据智慧大屏",
  },
  copyright: {
    type: String,
    default: "互邦老宝贝（苏州）科技有限公司",
  },
  showBackBtn: {
    type: Boolean,
    default: false,
  },
  fontSize: {
    type: Number,
    default: 42,
  },
  customLeft: {
    type: Boolean,
    default: false,
  },
  customTitle: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["back"]);

const weekday = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
const datetime = ref("");

const back = () => {
  emit("back");
};

const updateTime = () => {
  const week = weekday[dayjs().day()];
  const res = dayjs().format(`YYYY年MM月DD日 HH:mm:ss ${week}`);
  datetime.value = res;
};

const initTime = () => {
  updateTime();
  setInterval(() => {
    updateTime();
  }, 1000);
};

onBeforeMount(() => {
  initTime();
});
</script>
<style lang="scss" scoped>
.title-bar {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  background-image: url("../../assets//images/title_bg.png");
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;

  .title {
    text-align: center;
    flex: 1;
    background-image: linear-gradient(
      90deg,
      #2196f3 0%,
      rgb(255 255 255) 50%,
      #2196f3 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 76px;
    font-weight: bold;
    line-height: 110%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .back-btn {
      margin-left: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 5px;
      cursor: pointer;
    }

    .back-btn:active {
      opacity: 0.7;
    }

    .txt1 {
      margin-left: 20px;
      margin-right: 20px;
      font-size: 20px;
      color: #59cbff;
      line-height: 50px;
      text-shadow: 0px 2px 5px #000000;
    }
  }

  .time {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    .txt1 {
      margin-left: 20px;
      margin-right: 20px;
      font-size: 20px;
      color: #59cbff;
      line-height: 50px;
      text-shadow: 0px 2px 5px #000000;
    }

    .fbtn {
      margin-right: 20px;
    }
  }
}
</style>
